<template>
  <div class="home">
    <div class="top-head" :style="'top:' + paddingTop + 'px'">
      <van-nav-bar
        class="m-bar"
        @click-left="back"
        title="我的帖子"
        left-arrow
      />
      <div class="m-menu">
        <van-tabs v-model="active" class="tabs">
          <van-tab
            :title="c.name"
            v-for="c in cates"
            :key="c.val"
            :name="c.val"
          ></van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="head-height"></div>
    <div class="main-room">
      <my-topic v-if="active == 1" />
      <collect v-if="active == 2" />
    </div>
  </div>
</template>

<script>
import MyTopic from "./MyTopic";
import Collect from "./Collect";
export default {
  components: { MyTopic, Collect },
  name: "my-index",
  data() {
    return {
      cates: [
        { name: "我的发帖", val: 1 },
        { name: "我的收藏", val: 2 }
      ],
      active: 1
    };
  },
  methods: {
    back() {
      this.$router.go(-1);
    }
  },
  created() {
    this.paddingTop = window.sessionStorage.getItem("paddingTop");
  }
};
</script>

<style lang="less">
.t-item {
  position: relative;
  .s-tag {
    position: absolute;
    top: 0px;
    right: 20px;
  }
}
.home {
  background: #fff;
}
.head-height {
  height: 90px;
}
.top-head {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fff;
  z-index: 999999;
  .m-menu {
    .tabs {
      display: inline-block;
      width: 375px;
      .van-tab {
        flex-basis: 20% !important;
      }
      .van-tabs__wrap {
        border-width: 0 !important;
      }
      .van-tabs__wrap::after {
        border-width: 0 !important;
      }
      .van-tab--active {
        color: #e8575d !important;
        font-weight: bold;
        font-size: 18px;
        transition: 50ms;
      }
      .van-ellipsis {
        overflow: visible !important;
      }
      .van-tabs__line {
        background-color: #e8575d;
      }
    }
    .btn {
      display: inline-block;
      color: #555;
      padding: 7px 0;
      margin-left: 10px;
      font-size: 22px;
      text-align: center;
      vertical-align: top;
    }
  }
}
</style>
